<!--
 * @Author: your name
 * @Date: 2021-12-23 08:08:44
 * @LastEditTime: 2021-12-26 19:04:38
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue\vue-douban-pc\src\views\About.vue
-->

<template>
    <div class="about">
        <div class="m-block">
            <div class="m-list" v-for="list in movieList" :key="list.tv_id">
                <div class="m-kernel">
                    <h4>
                        <span class="new">{{ list.tv_new }}</span>
                        <span @click="href(list.tv_id)">{{ list.tv_title }}</span>
                    </h4>
                    <router-link :to="{ name: 'MoviePlay', params: { id: list.tv_id } }">
                        <img :src="baseUrl + list.tv_image" alt />
                    </router-link>
                    <div class="m-footer">
                        <span class="date-color">{{ list.tv_type }}</span>
                        <span class="score-color">评分: {{ list.tv_score }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import mixin from "../utils/mixin";
export default {
    name: 'VueMovies',
    mixins: [mixin],
    data() {
        return {
            movieList: [],
        };
    },

    mounted() {

    },
    created() {
        this.getMovieList();
    },
    methods: {
        getMovieList() {
            this.axios.get("/getMovieList").then((res) => {
                this.movieList = res.data;
            })
        },
        goMoviePlay() {
            this.$router.push('/movieplay');
        },
        href(id) {
            this.$router.push({ path: "/movieplay", name: "MoviePlay", params: { id: id } })
        }
    },
};
</script>

<style lang="scss" scoped>
.about {
    .m-block {
        width: 85%;
        position: absolute;
        top: 60px;
        left: 12%;

        .m-list {
            display: inline-block;
            .m-kernel {
                margin: 5px;
                padding: 20px;
                background-color: rgb(255, 255, 255);
                border-radius: 5px;
                h4 {
                    font-size: 15px;
                    font-weight: 600;
                    margin-bottom: 10px;
                    .new {
                        border: 1px solid green;
                        background-color: green;
                        color: honeydew;
                        font-size: 5px;
                    }
                }
                h4:hover {
                    color: orangered;
                    transition: all 0.3s ease;
                    cursor: pointer;
                }
                img {
                    height: 350px;
                    width: 230px;
                    cursor: pointer;
                }
                .m-footer {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    span {
                        display: inline-block;
                    }
                    .date-color {
                        margin-top: 10px;
                        color: green;
                        font-size: 10px;
                    }
                    .score-color {
                        margin-top: 10px;
                        color: orangered;
                    }
                }
            }
        }
    }
}
</style>